<template>
    <div class="login_ login_container">
        <div class="login_box">
            <!-- 登录表单 -->
            <el-form :model='loginForm' :rule="loginFormRules" label-width="0px" class='login_Form'>
                <!-- 用户名 -->
                <el-form-item prop='username'>
                  <el-input v-model='loginForm.username'></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item v-model='loginForm.password'>
                    <el-input v-model='loginForm.password'></el-input>
                </el-form-item>
                  <!-- 按钮 -->
                <el-form-item class = 'btns'>
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    export default {
      data(){
        return {
        loginForm:{
            username:'admin',
            password:'123456'
        },
        // 表单验证规则
        loginFormRules:{
            // 用户名
            username:{required:true,message:'请输入',tigger:'blur'},
            password:[]
        }
       }
     },
     methods:{
         async login(){
            const {data:res} =await this.$http.post('login',this.loginForm);
            console.log(res);
            window.sessionStorage.setItem("token",res.data.token);
            if(res.meta.status!==200) return console.log('登录失败')
            this.$router.push('/home')
         }
     }
    }
</script>

<style lang="less" scoped>
.login_container{
   height: 100%;
   background-color: #2b4b6b;
}
.login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.btns {
    display: flex;
    /* 尾部对齐 */
    justify-content: flex-end;
}
.login_Form{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
}
</style>